<template>
  <van-cell center title="心动模式" style="margin-top: 10px;margin-bottom: 5px;">
    <template #right-icon>
      <van-switch v-model="isMatchMode"/>
    </template>
  </van-cell>

  <hr/>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length<1" description="数据为空"/>
</template>

<script setup lang="ts">
import UserCardList from "../components/UserCardList.vue";

name:'Index'
import {useRoute} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";

import myAxios from "../plugins/myAxios.ts";
import {showToast} from 'vant';
import {getCurrentUser} from "../services/user.ts";


const route = useRoute();
const {tags} = route.query;
const userList = ref([]);
const isMatchMode = ref<boolean>(false);
const loading = ref(true)
const loadData = async () => {
  loading.value = true;
  let userListData = []
  const num = 10
  if (isMatchMode.value) {
    //心动模式
    userListData = await myAxios.get('/userInfo/match', {
      params: {
        num: num
      }
    }).then(res => {
      showToast("匹配成功~")
      return res?.data
    }).catch(() => {
      showToast("匹配失败·")
    })

  } else {
    //普通模式
    userListData = await myAxios.get('/userInfo/recommend', {
      params: {
        pageNum: 1,
        pageSize: 10,
      }
    }).then(res => {
      //分页查询不要忘了records
      return res?.data?.records
      showToast("加载成功~")
    }).catch(() => {
      showToast("加载失败·")
    })

  }
  if (userListData) {
    userListData.forEach((user: UserInfo) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
    })
  }
  userList.value = userListData
  loading.value = false
}

watchEffect(() => {
  loadData()
})
onMounted(() => {
  const cuser: UserInfo = getCurrentUser();
  console.log("user", cuser.id);
})
</script>
<style scoped>

</style>